<template>
	<div class="line21">
		<div id="line1x1" class="" style="width: 100%;height:640px;"></div>
	</div>
</template>

<script>
	import echarts from 'echarts/lib/echarts';
	// 引入柱状图
	import 'echarts/lib/chart/bar';
	import 'echarts/lib/chart/line';
	import 'echarts/lib/component/title';
	import 'echarts/lib/component/legend';
	import 'echarts/lib/component/toolbox';
	import 'echarts/lib/component/markPoint';
	import 'echarts/lib/component/tooltip';
	import 'echarts/lib/component/datazoom';
	import 'echarts/lib/component/markPoint';
	// import 'echarts/lib/component/timeline';
	export default {
		mounted() {
			this.myChart = echarts.init(document.getElementById('line1x1'));
			this.initData();
			console.log('echart_data!!!!!!!!!', this.echart_data)
		},
		props: ['series', 'echart_data'],
		methods: {
			initData() {
				const option = {

					grid: [{
							left: '5%',
							right: '5%',
							top: '15%',
							height: '55%'
						},

					],
                    legend: {
                        // orient: 'vertical',
                        // left: 'left',
						top:'0%',
						selectedMode: 'single',

                        // data: ['profit','amount','fee']
                    },
					tooltip: {
						trigger: 'axis',
						formatter: "vlaue:{c0}<br>type:{a}<br>name:{b}"
					},

					xAxis: [{
						type: 'category',
						// type: 'time',
						boundaryGap: ['0%', '0%'],
						// data: this.echart_point,
						data: this.echart_data['bar_name'],
						axisLabel: {
						   rotate: -60, // 角度值：Number
						   fontSize: 11, // 顺便调小一点字体大小
					  }
					}, ],
					dataZoom: [{
						type: 'slider',
						show: true,
						start: 0,
						end: 100,
						bottom: '0%',
						xAxisIndex: [0, ]
					}],
					yAxis: [{
							name: 'net_per',
							type: 'value',
							min: 'dataMin',
							max: 'dataMax',
							
						},

					],
					series: this.series,
				};
				this.myChart.clear();
				this.myChart.setOption(option);
			}
		},
		watch: {
			series: function() {
				this.initData()
				console.log(this.series, 'series')
			},
			echart_data: function() {
				this.initData()
				//console.log(this.echart_data, 'echart_data')
			}
		}
	}
</script>

<style>
	.line21 {
		display: flex;
		justify-content: center;
	}
</style>
